<template>
  <a-dropdown v-model="visible" trigger="click">
    <span 
      class="colorPick-btn"
    >
      <span class="colorPick-btn-option" :style="{ backgroundColor: value}" ></span>
      <i class="colorPick-btn-icon xicon-arrow-plane-down"></i>
    </span>
    <div class="colorPick-dropdown" slot="overlay">
      <span 
        class="colorPick-item" 
        :key="item.labelId" 
        v-for="item in colorConfig"
        :style="{ backgroundColor: item}"
        @click="onColorChange(item)" 
      >
        <span class="colorPick-dropdown-icon xicon-state-selected" v-if="value === item" />
    </span>
    </div>
  </a-dropdown>
</template>
<script>
  export default {
    name: 'TagColorPick',
    props: {
      value: {
        type: String,
        default: '#FF4D4F'
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    data() {
      return {
        visible: false,
        colorConfig: ['#FF4D4F', '#315CFA', '#61B109', '#FF9900', '#009688', '#0077FF', '#FFB300', '#3CADD6', '#73B18B', '#7E57C2']
      };
    },
    methods: {
      onColorChange(color){
        this.visible = false
        this.$emit('change', color);
      }
    }
  };
</script>

<style lang="scss" inline>
  .colorPick-btn{
    width: 60px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 2px; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .colorPick-btn-option{
      width: 20px;
      height: 20px;
      border-radius: 2px;
      margin-right: 8px;
    }
    .colorPick-btn-icon{
      font-size: 8px;
    }
  }
  .colorPick-dropdown{
    width: 168px;
    height: 70px;
    background: #FFFFFF;
    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px 0 #00000014, 0 9px 28px 8px #0000000d;
    border-radius: 2px;
    padding: 11px 10px;
    display: flex;
    flex-wrap: wrap; 
    gap: 5px 12px;
    .colorPick-item{
      width: 20px;
      height: 20px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .colorPick-dropdown-icon{
      color: #FFFFFF;
      font-size: 12px;
    }
  }
</style>
